import React, { useState } from "react";
import Biao from "../../components/index";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Button, Mask } from "antd-mobile";
import { shanchu, tianjia } from "../../store/xin/xin";
import { Form, Input } from "antd-mobile";
function Index() {
  const [visible, setVisible] = useState(false);
  const qwe = useLocation();
  const list = useSelector((state) => state.xin.xin);
  console.log(list);

  const dispatch = useDispatch();
  const shan = (id) => {
    dispatch(shanchu(id));
  };
  const tian = () => {
    setVisible(true);
  };
  const onFinish = (value) => {
    dispatch(tianjia(value))
    setVisible(false);

  };
  return (
    <div>
      <Biao v={qwe.state}></Biao>
      <Button onClick={() => tian()}>添加</Button>
      <Mask visible={visible} opacity="thick">
        <Form
          onFinish={onFinish}
          layout="horizontal"
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: "姓名不能为空" }]}
          >
            <Input onChange={console.log} placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            name="code"
            label="姓名"
            rules={[{ required: true, message: "姓名不能为空" }]}
          >
            <Input onChange={console.log} placeholder="请输入姓名" />
          </Form.Item>
        </Form>
      </Mask>
      {list.map((v, i) => {
        return (
          <p key={i}>
            {v.name} &nbsp;{v.code}{" "}
            <Button onClick={() => shan(v.id)} style={{ background: "red" }}>
              删除
            </Button>
          </p>
        );
      })}
    </div>
  );
}

export default Index;
